<template>
    <div>
        <Layout class-prefix="charts">
            <Type class="type-tab" :type="type" v-on:update:type="selectType($event)"/>
            <RecordPie :records="records"/>
            <div class="nodata" v-if="Object.keys(result).length === 0">暂无数据</div>
        </Layout>
    </div>

</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Watch} from 'vue-property-decorator';
    import Type from '@/components/Type.vue';
    import Range from '@/components/Range.vue';
    import RecordPie from '@/components/RecordPie.vue';

    @Component({
        components: {
            Type,
            Range,
            RecordPie
        },
        mounted() {
            this.$store.commit('fetchRecords');
            this.$data.type = '-';
        }
    })
    export default class Charts extends Vue {
        type = '';

        clearEverything() {
            this.$store.commit('clearRecords');
            alert('已清空LocalStorage中所有数据!');
            this.$store.commit('fetchRecords');
            this.recordList = (this.$store.state as RootState).recordList;
            this.records = {};
        }

        recordList = (this.$store.state as RootState).recordList;
        records = {};

        @Watch('type')
        onTypeChanged() {
            this.recordList = (this.$store.state as RootState).recordList;
            this.records = {
                series: [{
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: this.result,
                    avoidLabelOverlap: true,
                    hoverAnimation: true,
                    label: {
                        position: 'outside',
                        margin: '10%',
                        alignTo: 'labelLine',
                        align: 'center',
                        show: true,
                        formatter: '{b}',
                        fontSize: 14,
                        lineHeight: 20
                    },
                    labelLine: {
                        smooth: 0,
                        length: 5,
                        length2: 5
                    },
                    // itemStyle: {
                    //     shadowBlur: 200,
                    //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                    // },
                    emphasis: {
                        label: {
                            backgroundColor: '#FD9A16',
                            color: 'white',
                            borderColor: 'white',
                            borderWidth: 2,
                            padding: [5, 10],
                            borderRadius: 5,
                            formatter: '{b}\n￥{c}\n{d}%'
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#FD9A16'
                            },
                            smooth: 0,
                            length: 5,
                            length2: 5
                        },
                        itemStyle: {
                            color: '#FD9A16',
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                }],
                color: [
                    '#2966C1',
                    '#2C6FD2',
                    '#3C7AD6',
                    '#4C85D9',
                    '#5D90DD',
                    '#6D9BE0',
                    '#7DA6E3',
                    '#8DB1E7',
                    '#9EBCEA',
                    '#AEC7EE',
                    '#BED3F1',
                    '#CEDEF5',
                    '#DFE9F8',
                    '#EFF4FC'
                ]
            };
        }

        // 切换选择收入或支出
        selectType(type: string) {
            this.type = type;
        }

        get result() {
            const data: { value: number; name: string }[] = [];
            this.recordList.forEach(record => {
                if (record.type === this.type) {
                    // 计入结果
                    if (data === []) {
                        // push第一个结果
                        data.push({
                            value: record.amount,
                            name: record.category
                        });
                    } else {
                        //push
                        let alreadyHad = false;
                        data.forEach(item => {
                            if (item.name === record.category) {
                                // 已有此分类，求和更新值
                                item.value += record.amount;
                                alreadyHad = true;
                            }
                        });
                        if (!alreadyHad) {
                            data.push({
                                value: record.amount,
                                name: record.category
                            });
                        }
                    }
                }
            });

            return data;
        }

    }
</script>

<style lang="scss" scoped>
    .charts-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .nodata {
        font-size: 48px;
        line-height: 48px;
        color: #DDDDDD;
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -24px;
        left: 0;
        text-align: center;
        text-align: center;
    }
</style>